<template>
  <main class="about-page" role="main">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-10">
          <!-- SEO优化的页面标题 -->
          <header class="hero-section">
            <h1 class="hero-title">关于数知笔记</h1>
            <p class="hero-subtitle">专注于技术分享和知识传播的专业博客平台</p>
          </header>

          <!-- 主要内容 -->
          <div class="about-content">
            <div class="row g-4">
              <div class="col-md-8">
                <article class="content-section">
                  <h2>我们的使命</h2>
                  <p>
                    数知笔记致力于为技术爱好者、开发者和学习者提供高质量的技术内容和学习资源。
                    我们相信知识的力量，通过分享和传播优质的技术文章，帮助更多人在技术道路上成长和进步。
                  </p>

                  <h2>我们的愿景</h2>
                  <p>
                    成为最具价值的技术知识分享平台，连接全球的技术爱好者，促进技术知识的自由流动，
                    推动技术社区的发展和创新。
                  </p>

                  <h2>内容理念</h2>
                  <ul class="content-list">
                    <li>
                      <strong>原创性：</strong>
                      我们坚持发布原创内容，确保每篇文章都有独特的价值。
                    </li>
                    <li>
                      <strong>实用性：</strong>
                      注重实际应用，提供可操作的技术方案和最佳实践。
                    </li>
                    <li>
                      <strong>时效性：</strong>
                      紧跟技术发展趋势，及时分享最新的技术动态。
                    </li>
                    <li>
                      <strong>准确性：</strong>
                      严格审核内容质量，确保技术信息的准确性和可靠性。
                    </li>
                  </ul>

                  <h2>内容范围</h2>
                  <div class="topic-tags">
                    <span class="topic-tag">前端开发</span>
                    <span class="topic-tag">后端开发</span>
                    <span class="topic-tag">数据分析</span>
                    <span class="topic-tag">人工智能</span>
                    <span class="topic-tag">云计算</span>
                    <span class="topic-tag">DevOps</span>
                    <span class="topic-tag">移动开发</span>
                    <span class="topic-tag">数据库</span>
                    <span class="topic-tag">架构设计</span>
                    <span class="topic-tag">编程语言</span>
                  </div>

                  <h2>作者团队</h2>
                  <p>
                    我们的作者团队由经验丰富的技术专家、架构师和开发者组成，
                    他们来自各个技术领域，拥有丰富的实战经验和深厚的理论基础。
                    每位作者都致力于分享高质量的技术内容，帮助读者解决实际问题。
                  </p>

                  <h2>版权声明</h2>
                  <p>
                    本站所有原创文章均为作者原创作品，受版权法保护。转载时请注明出处并保留原文链接。
                    我们尊重知识产权，同时也希望得到读者的理解和支持。
                  </p>
                </article>
              </div>

              <div class="col-md-4">
                <div class="sidebar">
                  <div class="stats-card">
                    <h3>网站统计</h3>
                    <div class="stat-item">
                      <span class="stat-number">100+</span>
                      <span class="stat-label">技术文章</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-number">50+</span>
                      <span class="stat-label">技术主题</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-number">1000+</span>
                      <span class="stat-label">读者用户</span>
                    </div>
                  </div>

                  <div class="contact-card">
                    <h3>联系我们</h3>
                    <div class="contact-item">
                      <i class="fa fa-envelope"></i>
                      <span>903580396@qq.com</span>
                    </div>
                    <div class="contact-item">
                      <i class="fa fa-globe"></i>
                      <span>https://chongxingaokao.com</span>
                    </div>
                  </div>

                  <div class="feature-card">
                    <h3>网站特色</h3>
                    <ul class="feature-list">
                      <li>响应式设计，支持多端访问</li>
                      <li>高质量原创技术内容</li>
                      <li>分类清晰，检索便捷</li>
                      <li>定期更新，内容新鲜</li>
                      <li>社区互动，经验分享</li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { setSEO } from "@/utils/seo";

// 设置关于页面SEO
onMounted(() => {
  setSEO({
    title: "关于我们",
    description: "了解数知笔记 - 专注于技术分享和知识传播的专业博客平台。我们致力于为技术爱好者、开发者提供高质量的技术内容和学习资源。",
    keywords: "关于我们,数知笔记,技术博客,技术分享,编程教程,开发者社区,技术知识",
    canonicalUrl: window.location.origin + "/about",
  });
});
</script>

<style lang="scss" scoped>
.about-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 40px 0;

  .hero-section {
    text-align: center;
    margin-bottom: 50px;
    padding: 60px 0;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    .hero-title {
      font-size: 3rem;
      font-weight: 700;
      color: #2c3e50;
      margin-bottom: 20px;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;

      @media (max-width: 768px) {
        font-size: 2.5rem;
      }
    }

    .hero-subtitle {
      font-size: 1.2rem;
      color: #6c757d;
      max-width: 600px;
      margin: 0 auto;
      line-height: 1.6;
    }
  }

  .about-content {
    .content-section {
      background: white;
      border-radius: 15px;
      padding: 40px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
      height: fit-content;

      @media (max-width: 768px) {
        padding: 20px;
      }

      h2 {
        font-size: 1.8rem;
        font-weight: 600;
        color: #2c3e50;
        margin: 30px 0 15px 0;
        padding-bottom: 10px;
        border-bottom: 3px solid #3498db;
        display: inline-block;

        &:first-child {
          margin-top: 0;
        }
      }

      p {
        line-height: 1.8;
        color: #555;
        margin-bottom: 20px;
        text-align: justify;
      }

      .content-list {
        padding-left: 0;
        list-style: none;

        li {
          margin-bottom: 15px;
          padding: 15px;
          background: #f8f9fa;
          border-radius: 8px;
          border-left: 4px solid #3498db;

          strong {
            color: #2c3e50;
          }
        }
      }

      .topic-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 20px 0;

        .topic-tag {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          color: white;
          padding: 8px 16px;
          border-radius: 20px;
          font-size: 0.9rem;
          font-weight: 500;
          transition: transform 0.3s ease;

          &:hover {
            transform: translateY(-2px);
          }
        }
      }
    }

    .sidebar {
      .stats-card,
      .contact-card,
      .feature-card {
        background: white;
        border-radius: 15px;
        padding: 30px;
        margin-bottom: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);

        h3 {
          font-size: 1.4rem;
          font-weight: 600;
          color: #2c3e50;
          margin-bottom: 20px;
          text-align: center;
          padding-bottom: 10px;
          border-bottom: 2px solid #eee;
        }
      }

      .stats-card {
        .stat-item {
          text-align: center;
          margin-bottom: 20px;

          .stat-number {
            display: block;
            font-size: 2rem;
            font-weight: 700;
            color: #3498db;
            margin-bottom: 5px;
          }

          .stat-label {
            font-size: 0.9rem;
            color: #6c757d;
          }
        }
      }

      .contact-card {
        .contact-item {
          display: flex;
          align-items: center;
          margin-bottom: 15px;
          padding: 10px;
          background: #f8f9fa;
          border-radius: 8px;

          i {
            color: #3498db;
            width: 20px;
            margin-right: 15px;
          }

          span {
            color: #555;
            font-size: 0.9rem;
          }
        }
      }

      .feature-card {
        .feature-list {
          list-style: none;
          padding: 0;

          li {
            margin-bottom: 12px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 6px;
            font-size: 0.9rem;
            color: #555;
            border-left: 3px solid #3498db;
          }
        }
      }
    }
  }
}
</style>
